<template>
  <div class="Overall">
    <div style="display: flex;align-items: center;justify-content: space-between;">
      <div><h2 class="we1">科技资源统计</h2></div>
      <div>
        <box-tp>
          <template slot="tittle">机构/专家统计</template>
          <template slot="svg"><svg-icon icon-class='s1' className='s1' style="width: 60px;height: 60px;"></svg-icon></template>
          <template slot='content'>
            <el-row class="b1"><span>入驻机构：{{n1}}</span></el-row>
            <el-row class="b1"><span>技术专家：{{n2}}</span></el-row>
            <el-row class="b1"><span>合作厂商：{{n3}}</span></el-row>
          </template>
        </box-tp>
      </div>
      <div>
        <box-tp>
          <template slot="tittle">科技资源</template>
          <template slot="svg"><svg-icon icon-class='s2' className='s2' style="width: 60px;height: 60px;"></svg-icon></template>
          <template slot='content'>
            <el-row class="b1"><span>科技成果：{{n4}}</span></el-row>
            <el-row class="b1"><span>技术需求：{{n5}}</span></el-row>
            <el-row class="b1"><span>企业数量：{{n6}}</span></el-row>
          </template>
        </box-tp>
      </div>
      <div>
        <box-tp>
          <template slot="tittle">对接统计</template>
          <template slot="svg"><svg-icon icon-class='s3' className='s3'></svg-icon></template>
          <template slot='content'>
            <el-row class="b1"><span>供需对接：{{n7}}</span></el-row>
            <el-row class="b1"><span>达成意向：{{n8}}</span></el-row>
            <el-row class="b1"><span>发起应标：{{n9}}</span></el-row>
          </template>
        </box-tp>
      </div>
    </div>
  </div>
</template>

<script>
import BoxTp from '../CommonTemplates/BoxTp.vue'

export default {
  name: 'HomePageGroupB',
  components : {
    BoxTp,
  },
  created(){
    this.getcount();
  },
  data () {
    return {
      // dataList:"",
      n1: 0,
      n2: 0,
      n3: 0,
      n4: 0,
      n5: 0,
      n6: 0,
      n7: 0,
      n8: 0,
      n9: 0,
    }
  },
  methods:{
    getcount(){
      this.api.getcount().then(res => {
        let {code, message, data} = res;
        if(['200', 200].includes(code) && res.success == true) {
          // console.log(data);
          this.n1 = data[0].subdec[0].scount;
          this.n2 = data[0].subdec[1].scount;
          this.n3 = data[0].subdec[2].scount;
          this.n4 = data[1].subdec[0].scount;
          this.n5 = data[1].subdec[1].scount;
          this.n6 = data[1].subdec[2].scount;
          this.n7 = data[2].subdec[0].scount;
          this.n8 = data[2].subdec[1].scount;
          this.n9 = data[2].subdec[2].scount;
        }
        else {
            this.$message({
                type: "info",
                message: message
            })
        }
      }).catch(err => {
          this.$message({
              type: "info",
              message: err
          })
      })
    },
  },
}
</script>


<style scoped>
.all{
  padding-right: 20px;
  /* background-color: rgb(228, 180, 48); */
}
.box-c{
  background-color: bisque;
}
.Overall{
  background-color: rgb(200, 211, 216);
}
.we1{
  background-color: rgb(101, 179, 179);
  font-size: 28px;
  color: white;
  padding: 70px 60px;
  border: thin solid black;
  letter-spacing: 2px;
}
.s3{
  width: 80px;
  height: 80px;
  position: relative;
  top: -10px;
}
.b1{
  margin: 16px 26px;
}
</style>